<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>TEXTBOX COMPONENT</title>
    <!-- [REQUIRED] JQUERY SCRIPT/CSS INTEGRATION -->
    <!-- INCLUDING COMPONENT-RELATED EXTERNAL SCRIPTS -->
    <link href="../../api/css/cupertino/jquery-ui-1.10.1.custom.min.css" rel="stylesheet">

    <!-- COMPONENT STYLING -->
    <style type="text/css">
        html, body {background-color:transparent;font-family:sans-serif; width:100%; height:100%;margin:0;padding:0; overflow:hidden;}
        label {margin:10px;width: 100%;cursor: help; display: block;}
        p { margin-left: 10px;}
        body > div {width:100%;}
        div div {padding-left:10px;padding-right:20px;}
        input {width: 100%; height: 24px; }
    </style>

    <!-- Auto Complete -->
    <style type="text/css">
        .ui-autocomplete .ui-menu-item { margin:10px 0; font-size: 12px;}
            /*.ui-autocomplete-category {
                font-weight: bold;
                padding: .2em .4em;
                margin: .8em 0 .2em;
                line-height: 1.5;
            }*/
    </style>
    <script src="../../api/js/jquery-1.8.3.js"></script>
    <script src="../../api/js/jquery-ui-1.10.1.custom.min.js"></script>

    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
    <!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
    <script type="text/javascript">

        //comment this line when done testing
        //$(function(){initialize();});

        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            varname: undefined,
            variable: undefined,
            value: undefined,
            notify: false
        };

        window.onload = function() {};

        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            //set property values to dom elements if needed
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var refreshProperties = function refreshProperties(){ //REQUIRED function to be called by parent when a property change occurs
            var vname = getVnam();
            if(vname)
            {
                var txt = $('input:text[id="#bi_text"]').val();

                if(properties.notify)
                    BOI.Events.raiseEvent(BOI.Events.varchange, [vname, txt]);

                var label = $('#bi_var_name');
                label.html(vname);
                if(properties.variable)
                {
                    var label = $('label[for="bi_text"]');
                    label.html(properties.variable.name);
                    label.attr('title', properties.variable.description);
                    $('#bi_desc').html(properties.variable.description);
                    $('#bi_text').val(properties.value);
                }
            }
        };

        function getVnam(){
            vname = properties.varname ? properties.varname : properties.variable ? properties.variable.name : undefined;
           return vname;
        }
    </script>

    <!-- COMPONENT SCRIPT -->
    <script type="text/javascript">
        $(function () {
            // $('#bi_text').live('keyup', function(){
            $('#bi_text').bind('keypress', function (e) {
                if (e.which==13) {
                    properties.value = $(this).val();
                    var vname = getVnam();
                    vname="["+vname+"]";
                     BOI.setContextVariable(vname, properties.value, 'string', 'P');
                    BOI.Events.raiseEvent(BOI.Events.varchange, [vname, properties.value]);
                }
            });
        });
    </script>
</head>
<body>
<label title="Variable Description" for="bi_text">VARIABLE</label>
<p id="bi_desc">Variable Description</p>
<div><div><input type="text" id="bi_text" /></div></div>
</body>
</html>